<template>
    <div class="system-feedback-container">
        <el-form :inline="true" ref="form" class="system-search-form" :model="searchForm">
            <el-form-item>
                <el-select v-model="searchForm.province" filterable clearable placeholder="请选择省" @change="getCity" size="small">
                    <el-option
                        v-for="item in provinceList"
                        :key="item.i"
                        :label="item.n"
                        :value="item.i">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchForm.city" filterable clearable placeholder="请选择市" @change="getArea" size="small">
                    <el-option
                        v-for="item in cityList"
                        :key="item.i"
                        :label="item.n"
                        :value="item.i">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchForm.area" filterable clearable placeholder="请选择区" @change="getMechanism" size="small">
                    <el-option
                        v-for="item in areaList"
                        :key="item.i"
                        :label="item.n"
                        :value="item.i">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchForm.mechanism" filterable clearable placeholder="请选择机构" size="small">
                    <el-option
                        v-for="item in mechanismOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchForm.type" filterable clearable placeholder="请选择类型" size="small">
                    <el-option
                        v-for="item in typeOptions"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button class="sub-btn" type="primary" size="small" @click="toFirstPage()">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="table-box">
            <el-button class="add-btn" type="primary" size="small" v-auth="{code: 300009000002}" @click="exportTable">导出</el-button>
            <el-table
                ref="tableData"
                :data="tableData"
                tooltip-effect="light"
                border
                :max-height="tableHeight"
                @sort-change="sortChange"
                class="data-table">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="organizationName"
                    align="center"
                    label="反馈机构"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    label="反馈人"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="feedbackKindName"
                    align="center"
                    label="反馈类型"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="content"
                    align="center"
                    label="反馈内容"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    align="center"
                    label="反馈时间"
                    sortable="custom"
                    show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <pagination v-show="tableData.length > 0" :total="total" :page.sync="currentPage" :limit.sync="pageSize"
                        @pagination="getData"/>
        </div>
    </div>
</template>

<script>
    import {getFeedbackList, exportFeedbackList} from '@/api/system/feedback'
    import {downloadData, getSortString} from '@/utils/filters'
    import Pagination from '@/components/Pagination'
    import regions from '@/assets/json/regions.json'

    export default {
        name: 'index',
        data () {
            return {
                // 搜索表单
                searchForm: {
                    province: '',
                    city: '',
                    area: '',
                    mechanism: '',
                    type: ''
                },
                // 机构列表
                mechanismOptions: [],
                // 列表数据
                tableData: [],
                // 数据总数
                total: 1,
                // 当前页
                currentPage: 1,
                // 每页数量
                pageSize: 10,
                // 表格高度
                tableHeight: 100,
                // 显示弹框
                dialogVisible: false,
                // 省列表
                provinceList: [],
                // 市列表
                cityList: [],
                // 区列表
                areaList: [],
                // 排序字段
                sortMap: {},
                // 排序方式
                sortType: '',
                // 类型选项
                typeOptions: [
                    {'key': 1, 'value': '编码问题'},
                    {'key': 2, 'value': '非编码问题'},
                    {'key': 3, 'value': '评分问题'},
                    {'key': 4, 'value': '统计问题'},
                    {'key': 5, 'value': '其他问题'}
                ],
                // 使用储存的数据，不去请求
                useStore: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStore = this.$route.query.tags === 'tags'
            let height = document.documentElement.clientHeight - 213 - 10 - 78 - 5
            this.tableHeight = height > 107 ? height : 107
            this.getAddressList()
            this.initData()
            this.getData()
        },
        mounted () {
            window.onresize = () => {
                // 213=其他元素高度60+50+48+55 10=距离底部边距 78=分页组件高度 5=适应性调整
                let height = document.documentElement.clientHeight - 213 - 10 - 78 - 5
                this.tableHeight = height > 107 ? height : 107
            }
        },
        methods: {
            /**
             * 初始化页面参数
             */
            initData () {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                if (JSON.stringify(query) !== '{}') {
                    this.searchForm.province = query.proviceId || ''
                    if (query.proviceId) this.getCity(query.proviceId)
                    this.searchForm.city = query.cityId || ''
                    if (query.cityId) this.getArea(query.cityId)
                    this.searchForm.area = query.countyId || ''
                    this.searchForm.mechanism = query.orgId || ''
                    this.searchForm.type = query.feedbackKind || ''
                    this.currentPage = query.index || 1
                    this.pageSize = query.pageSize || 10
                    this.sortType = query.orderBy || null
                }
            },
            /**
             * 获取省列表
             */
            getAddressList () {
                this.provinceList = regions.a
            },
            /**
             * 获取市列表
             */
            getCity (val) {
                this.searchForm.city = ''
                this.searchForm.area = ''
                this.searchForm.mechanism = ''
                this.mechanismOptions = []
                this.cityList = this.getChildren(this.provinceList, val)
                if (!this.cityList.length) {
                    this.mechanismOptions = this.getAreaMechanism(val)
                }
            },
            /**
             * 获取区列表
             */
            getArea (val) {
                this.searchForm.area = ''
                this.searchForm.mechanism = ''
                this.mechanismOptions = []
                this.areaList = this.getChildren(this.cityList, val)
                if (!this.areaList.length) {
                    this.mechanismOptions = this.getAreaMechanism(val)
                }
            },
            /**
             * 获取机构列表
             */
            getMechanism (val) {
                this.mechanismOptions = this.getAreaMechanism(val)
            },
            /**
             * 遍历获取地区子级
             * @param arr 当前地区列表
             * @param id 指定id
             */
            getChildren (arr, id) {
                let length = arr.length
                let list = []
                for (let i = 0; i < length; i++) {
                    if (arr[i].i === id) {
                        list = arr[i].c
                        break
                    }
                }
                return list
            },
            /**
             * 根据行政区域找机构
             * @param val 行政代码
             */
            getAreaMechanism (val) {
                let allList = this.getLocalStorage('userInfo', 'mechanism')
                return allList.filter(item => item.division === val)
            },
            /**
             * 修改条件后从第一页开始
             */
            toFirstPage () {
                this.currentPage = 1
                this.getData()
            },
            /**
             * 获取表格数据
             * @param type 是否重置页码
             */
            getData (type) {
                let params = {
                    proviceId: this.searchForm.province,
                    cityId: this.searchForm.city,
                    countyId: this.searchForm.area,
                    orgId: this.searchForm.mechanism || null,
                    feedbackKind: this.searchForm.type || null,
                    index: this.currentPage,
                    pageSize: this.pageSize
                }
                if (this.sortType) params.orderBy = this.sortType
                this.setGetStore(this.$route.name, params)
                if (this.getSession(this.$route.name, 'getFeedbackList') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getFeedbackList')
                    if (res.code.toString() === '200') {
                        this.tableData = res.data.rows
                        this.sortMap = res.data.maps
                        this.total = res.data.total
                    }
                } else {
                    getFeedbackList(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getFeedbackList: res})
                        if (res.code.toString() === '200') {
                            this.tableData = res.data.rows
                            this.sortMap = res.data.maps
                            this.total = res.data.total
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 排序修改
             * @param colData.prop 排序参数
             * @param colData.order 正序倒序 ascending 升序 descending 降序 null 不排序默认
             */
            sortChange (colData) {
                this.sortType = getSortString(colData, this.sortMap)
                this.tableData = []
                this.currentPage = 1
                this.getData()
            },
            // /**
            //  * 获取完整地址
            //  * @param row 行数据
            //  */
            // getFullAddress (row) {
            //     let length = this.provinceList.length
            //     let province = ''
            //     let city = ''
            //     for (let i = 0; i < length; i++) {
            //         if (this.provinceList[i].i === row.省) {
            //             province = this.provinceList[i].n
            //             if (row.市) {
            //                 let cityLength = this.provinceList[i].c.length
            //                 for (let j = 0; j < cityLength; j++) {
            //                     if (this.provinceList[i].c[j].i === row.市) {
            //                         city = this.provinceList[i].c[j].n
            //                         break
            //                     }
            //                 }
            //             }
            //             break
            //         }
            //     }
            //     return province + city + row.所在地区.名称
            // },
            // /**
            //  * 获取上级机构
            //  * @param row 行数据
            //  */
            // getParentMechanism (row) {
            //     let allMechanism = this.getLocalStorage('userInfo', 'mechanism')
            //     if (allMechanism.length) {
            //         let res = allMechanism.filter(item => item.id === row.上级机构)
            //         return res[0] ? res[0].名称 : ''
            //     }
            //     return ''
            // },
            /**
             * 导出数据
             */
            exportTable () {
                let params = {
                    proviceId: this.searchForm.proviceId,
                    cityId: this.searchForm.city,
                    countyId: this.searchForm.area,
                    orgId: this.searchForm.mechanism || null,
                    feedbackKind: this.searchForm.type || null,
                    index: this.currentPage,
                    pageSize: this.pageSize
                }
                exportFeedbackList(params).then(res => {
                    downloadData('意见反馈', res)
                })
            }
        },
        components: {
            Pagination
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style lang="scss" scoped>
    .system-feedback-container {
        .system-search-form {
            .el-form-item {
                margin-bottom: 0;
            }
        }
        .table-box {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            height: calc(100vh - 183px);
            .add-btn {
                margin-bottom: 10px;
            }
        }
    }
</style>
